<template>
  <div class="app-container">
    <transition name="el-zoom-in-top">
      <el-form v-show="show" ref="form" :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="菜单名称">
          <el-input v-model="form.title" placeholder="菜单名称" clearable />
        </el-form-item>
        <el-form-item label="是否隐藏">
          <el-select v-model="form.hidden" placeholder="是否隐藏" style="width: 100px" clearable>
            <el-option label="否" :value="false" />
            <el-option label="是" :value="true" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="handleSearch">查询</el-button>
          <el-button icon="el-icon-close" plain @click="handleClearSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </transition>
    <el-row class="g-row">
      <el-button icon="el-icon-plus" type="primary" plain @click="handleOpenDialog()">新填</el-button>
      <div style="float: right">
        <el-button icon="el-icon-sort" plain @click="show = !show">查询条件</el-button>
        <el-button icon="el-icon-refresh-left" plain @click="loadList">刷新</el-button>
      </div>
    </el-row>
    <el-row class="g-row">
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        style="width: 100%"
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        row-key="id"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="title" label="菜单名称" />
        <el-table-column prop="icon" label="图标" width="100">
          <template v-slot="scope">
            <svg-icon :icon-class="scope.row.icon" />
          </template>
        </el-table-column>
        <el-table-column prop="permission" label="权限标识" />
        <el-table-column prop="path" label="路由地址" />
        <el-table-column prop="component" label="组件路径" />
        <el-table-column prop="hidden" label="可视" width="100">
          <template v-slot="scope">
            <el-tag v-if="scope.row.hidden === false" type="success">显示</el-tag>
            <el-tag v-if="scope.row.hidden === true" type="danger">隐藏</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="170" />
        <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="160">
          <template v-slot="scope">
            <el-button type="text" class="g-button" @click="handleOpenDialog(scope.row)">修改</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row)">
              <el-button v-if="!scope.row.children" slot="reference" type="text" class="g-button">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.visible"
      width="580px"
      :before-close="handleCloseDialog"
    >
      <el-form ref="dialogForm" :model="dialogForm" label-width="80px" :inline="true" :rules="rules">
        <el-form-item label="菜单类型">
          <el-radio-group v-model="dialogForm.type" size="mini" style="width: 178px" @change.passive="handelClearData(dialogForm.type)">
            <el-radio-button :label="0">目录</el-radio-button>
            <el-radio-button :label="1">菜单</el-radio-button>
            <el-radio-button :label="2">按钮</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-show="dialogForm.type !== 2" label="菜单图标">
          <el-popover
            placement="bottom-start"
            width="450"
            trigger="click"
            @show="$refs['iconSelect'].reset()"
          >
            <IconSelect ref="iconSelect" @selected="selected" />
            <el-input slot="reference" v-model="dialogForm.icon" style="width: 450px;" placeholder="点击选择图标" readonly>
              <svg-icon v-if="dialogForm.icon" slot="prefix" :icon-class="dialogForm.icon" class="el-input__icon" style="height: 32px;width: 16px;" />
              <i v-else slot="prefix" class="el-icon-search el-input__icon" />
            </el-input>
          </el-popover>
        </el-form-item>
        <el-form-item v-show="dialogForm.type !== 2" label="菜单可见">
          <el-radio-group v-model="dialogForm.hidden">
            <el-radio-button :label="false">是</el-radio-button>
            <el-radio-button :label="true">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="dialogForm.type === 2?'按钮标题':'菜单标题'" prop="title">
          <el-input v-model="dialogForm.title" :placeholder="dialogForm.type === 2?'按钮标题':'菜单标题'" style="width: 450px;" />
        </el-form-item>
        <el-form-item v-show="dialogForm.type !== 0 " label="权限标识" prop="permission">
          <el-input v-model="dialogForm.permission" placeholder="权限标识，例如：sys:user:list" style="width: 450px;" />
        </el-form-item>
        <el-form-item v-show="dialogForm.type !== 2" label="路由地址" prop="path">
          <el-input v-model="dialogForm.path" placeholder="路由地址，例如：/system" style="width: 450px" />
        </el-form-item>
        <el-form-item v-show="dialogForm.type == 1 " label="组件路径" prop="component">
          <el-input v-model="dialogForm.component" placeholder="组件路径，例如：system/user/User" style="width: 450px" />
        </el-form-item>
        <el-form-item label="上级菜单" prop="pid">
          <treeselect
            v-model="dialogForm.pid"
            :options="menus"
            :normalizer="normalizer"
            style="width: 450px;"
            placeholder="选择上级菜单"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseDialog">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>

  </div>

</template>

<script>
import MenuApi from '@/api/system/menu.js'
import IconSelect from '@/components/IconSelect'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  name: 'Menu',
  components: { IconSelect, Treeselect },
  data() {
    return {
      loading: true,
      dialog: {
        visible: false,
        title: ''
      },
      show: true,
      form: {
      },
      dialogForm: {
        id: null,
        pid: 0,
        type: 0,
        icon: null,
        hidden: false,
        title: null,
        permission: null,
        path: null,
        component: null
      },
      menus: [],
      normalizer(node) {
        return {
          label: node.title
        }
      },
      tableData: [],
      rules: {
        title: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.loadList()
  },
  methods: {
    loadList() {
      this.loading = true
      MenuApi.listSysMenu(this.form).then(res => {
        this.loading = false
        this.tableData = res.data
      })
    },
    handleDelete(data) {
      MenuApi.deleteSysMenu(data.id).then(res => {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.loadList()
      })
    },
    handleSearch() {
      this.loadList()
      this.$message.success('查询成功')
    },
    handleClearSearch() {
      this.form = {
        name: '',
        code: ''
      }
    },
    handleOpenDialog(row) {
      this.dialog.visible = true
      if (row) {
        this.dialog.title = '修改'
        this.dialogForm = JSON.parse(JSON.stringify(row))
        MenuApi.listSysMenuToSelect(row.id).then(res => {
          if (res.data.length === 0) {
            this.menus = [{ id: 0, title: '顶级菜单' }]
          } else {
            this.menus = [{ id: 0, title: '顶级菜单', children: res.data }]
          }
        })
      } else {
        this.dialog.title = '新添'
        MenuApi.listSysMenuAllToSelect().then(res => {
          if (res.data.length === 0) {
            this.menus = [{ id: 0, title: '顶级菜单' }]
          } else {
            this.menus = [{ id: 0, title: '顶级菜单', children: res.data }]
          }
        })
      }
    },
    handleCloseDialog() {
      this.dialogForm = {
        id: null,
        pid: 0,
        type: 0,
        icon: null,
        hidden: false,
        title: null,
        permission: null,
        path: null,
        component: null
      }
      this.$refs.dialogForm.resetFields()
      this.dialog.visible = false
    },
    handelClearData(type) {
      this.dialogForm = {
        id: null,
        pid: 0,
        type: type,
        icon: null,
        hidden: false,
        title: null,
        permission: null,
        path: null,
        component: null
      }
      this.$refs.dialogForm.resetFields()
    },
    handleSubmit() {
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          if (this.dialogForm.id) {
            MenuApi.updateSysMenu(this.dialogForm).then(res => {
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.handleCloseDialog()
              this.loadList()
            })
          } else {
            MenuApi.saveSysMenu(this.dialogForm).then(res => {
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.handleCloseDialog()
              this.loadList()
            })
          }
          location.reload()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 选中图标
    selected(name) {
      this.dialogForm.icon = name
    }
  }
}
</script>

<style scoped>
.g-row{
  margin-top: 10px;
}
.g-button{
  margin: 0;
  padding: 0;
  width: 40px
}
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
